<template>
    <div class="sdy-register">
        <SdyHeader title="啥都有~注册" back></SdyHeader>
        <!-- 书写一个步骤条 -->
    <van-steps class="steps" :active="active" finish-icon="like-o">
      <van-step>手机号验证</van-step>
      <van-step>验证码验证</van-step>
      <van-step>填写密码</van-step>
      <van-step>注册完成</van-step>
    </van-steps>

    <!-- 每一个步骤的内容 -->
    <!-- 步骤1: 验证手机号是否被注册过 -->
    <div v-if="active === 0" class="step0 step-item">
      <!-- 表单填写手机号 -->
      <van-form class="login-form" @submit="checkPhoneHandler">
        <van-cell-group inset>
          <van-field
            v-model="phone"
            name="手机号"
            label="手机号"
            placeholder="手机号"
            :rules="[{ required: true, message: '请填写手机号', pattern: /\d{11}/ }]"/>
        </van-cell-group>
        <div style="margin: 16px;">
          <van-button round block type="primary" native-type="submit">
            验证
          </van-button>
        </div>
      </van-form>
    </div>

    <!-- 获取验证码并验证验证码正确性 -->
    <div v-if="active === 1" class="step1 step-item">
      <van-form class="login-form" @submit="checkCodeHandler">
        <van-cell-group inset>
          <van-field
            v-model="code"
            center
            clearable
            placeholder="请输入短信验证码"
            :rules="[{ required: true, message: '请填写验证码' }]">
            <template #button>
              <van-button :disabled="codeBtn" @click="sendCodeHandler" size="small" type="primary">发送验证码</van-button>
            </template>
          </van-field>
        </van-cell-group>
        <div style="margin: 16px;">
          <van-button round block type="primary" native-type="submit">
            验证
          </van-button>
        </div>
      </van-form>
    </div>

    <!-- 验证两次密码一致 -->
    <div v-if="active === 2" class="step2 step-item">
      <!-- 表单填写两次密码 -->
      <van-form class="login-form" @submit="registerHandler">
        <van-cell-group inset>
          <van-field
            v-model="password"
            name="密码"
            label="密码"
            placeholder="密码"
            :rules="[{ required: true, message: '请填写密码' }]"/>
          <van-field
            v-model="rpwd"
            name="重复密码"
            label="重复密码"
            placeholder="重复密码"
            :rules="[{ required: true, message: '请填写重复密码' }]"/>
        </van-cell-group>
        <div style="margin: 16px;">
          <van-button round block type="primary" native-type="submit">
            注册
          </van-button>
        </div>
      </van-form>
    </div>

      <!-- 完成注册 -->
      <div v-if="active === 3" class="step3 step-item">
        <van-icon class="finish" name="passed" />
        <router-link to="/login">
          <van-button type="success">去登录</van-button>
        </router-link>
      </div>
    </div>
</template>

<script setup lang="ts">
  import { ref } from 'vue'
// 导入相关请求接口
import { checkPhoneApi, sendCodeApi, checkCodeApi, registerApi } from '@/api/users'
// 导入 avnt 的 Toast 弹出层
import { Toast } from 'vant'

 
// 准备一个变量表示 步骤条数据
const active = ref<number>(0)

// 验证手机号
const phone = ref<string>('')
const checkPhoneHandler = async () => {
  const res = await checkPhoneApi(phone.value)

  // 判断结果
  // 表示可以继续
  if (((res as unknown) as { code: string }).code === '200') {
    // 继续下一步
    // 调整 active 就可以了
    active.value++
    return
  }

// 代码执行到这里, 说明手机号不行
    Toast({
      message: '手机号已被注册',
      icon: 'phone-circle-o',
      })
}

// 验证验证码
const code = ref<string>('')
// 发送验证码按钮是否禁用
const codeBtn = ref<boolean>(false)
// 发送验证码
const sendCodeHandler = async () => {
  codeBtn.value = true
  // 发送验证码到你的手机号(phone)
  const res = await sendCodeApi(phone.value)
  console.log(res)
}
// 验证验证码
const checkCodeHandler = async () => {
  const res = await checkCodeApi(phone.value, code.value)

  // 判断结果
  // 表示可以继续
  if (((res as unknown) as { code: string }).code === '200') {
    // 继续下一步
    // 调整 active 就可以了
    active.value++
    return
  }

  // 代码执行到这里, 说明手机号不行
Toast({
  message: '验证码错误',
  icon: 'phone-circle-o',
  })
}

// 采集密码
const password = ref<string>('')
const rpwd = ref<string>('')
// 提交的方法
const registerHandler = async () => {
  // 1. 两次密码不一致
  if (password.value !== rpwd.value) return Toast({
  message: '两次密码不一致',
  icon: 'phone-circle-o',
})

  // 2. 发送请求
  const res = await registerApi(phone.value, password.value)

  // 判断结果
  // 表示可以继续
  if (((res as unknown) as { code: string }).code === '200') {
    // 继续下一步
    // 调整 active 就可以了
    active.value++
    return
  }

  // 代码执行到这里, 说明手机号不行
Toast({
  message: '注册失败, 请重试',
  icon: 'phone-circle-o',
  }).
}

</script>

<style scoped lang="scss">
  .sdy-register {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    > .steps {
      width: 80%;
    }

    > .step-item {
      width: 80%;
      height: 200px;
      border: 1px solid #333;
      border-radius: 10px;
      margin-top: 10px;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
    }
  }

  .finish {
    font-size: 80px;
    color: orange;
  }

</style>
